<template>
  <div class="content" >
    <!--header 普通商品详情-->
    <div class="goods">
      <div class="goods-img">
        <mt-swipe :auto="0">
          <mt-swipe-item v-for="(item,index) in mallImgList" :key="index"><img :src=item alt=""></mt-swipe-item>
        </mt-swipe>
        <!--<div class="fenye">1/5</div>-->
      </div>
      <div class="goods-price">
        <div class="top">
          <span class="price">&yen{{mallSpec.salePrice/100}}</span>
        </div>
        <div class="middle">
          <span class="left">京东价: <span>{{mallSpec.jdPrice/100}}</span></span>
          <span class="right">已进货: <span>{{mallSpec.stock}}</span></span>
        </div>
        <div class="goods-title">
         <span>
           {{goodsInfo.mallName}}
         </span>
          <p class="mallLabel">
            {{goodsInfo.mallLabel}}
          </p>
        </div>

      </div>
    </div>
    <div class="fenge"></div>
    <div class="shop">
      <div class="shop-img">
        <img :src=this.goodsInfo.mallImg alt="">
      </div>
      <div class="shop-name">
        <p class="name">{{this.goodsInfo.mallTypeName}}</p>
        <p class="gys">供应商</p>
      </div>
      <div class="all" @click="toHome">
        首页
      </div>
    </div>

    <div class="text">
      <ul>
        <li><img src="./ico@1x.png" alt="">包邮代发</li>
        <li><img src="./ico@1x.png" alt="">48小时发货</li>
        <li><img src="./ico@1x.png" alt="">无条件退换</li>
        <li><img src="./ico@1x.png" alt="">正品保障</li>
      </ul>
    </div>
    <div class="fenge"></div>
    <div class="goods-detail">
      <div class="detail-title">
        商品详情
      </div>
      <div class="detail-img">
        <div v-for="img in mallDetailList">
          <img v-lazy='img' alt="">
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="home" @click="toHome">
        <div>
          <img src="./ico_home@1x.png" alt="">
        </div>
        <span>首页</span>
      </div>
      <router-link to="/Messages">
        <div class="serve">
          <div>
            <img src="./ico_kf@1x.png" alt="">
          </div><span>客服</span>
        </div>
      </router-link>

      <div class="go"  @click="show">
        <p>立刻购买</p>
        <p class="countDown">
        </p>
      </div>
    </div>

    <div  class="choose" v-show="isShow">
      <div class="bg">
        <div class="shop-goods">
          <div class="goods-img">
            <img :src=goodsInfo.mallImg alt="">
          </div>
          <div class="price">
            <p v-model="price">&yen{{price/100}} <b v-model="jdPrice">京东价：{{jdPrice/100}}</b></p>
            <p>请选择规格和数量</p>
          </div>
          <img @click="close" class="close" src="./ico_guanbi@1x.png" alt="">
        </div>
        <div class="guige">
          <div class="gg-title">规格</div>
          <ul>
            <li v-for="(guige,index) in specList" @click="changeCurId(index)" :class="{'select':curId===index}">{{guige.specificationsName}}</li>
          </ul>
        </div>
        <div class="num">
          <p>数量</p>
          <div class="numbers">
            <img class="sub" src="./_@1x.png" alt="" v-on:click="sub">
            <div class="number" v-model="isNum">{{isNum}}</div>
            <img  class="add" src="./+@1x.png" alt="" v-on:click="add">
          </div>
        </div>
      </div>

    </div>
    <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>

    <loading v-show="showLoading "></loading>
  </div>
</template>
<script>
  import { Toast } from 'mint-ui'
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../../components/httpUtil/httpUtil'
  import {msg_10046} from '../../message/msg_10046'
  import {msg_10053} from '../../message/msg_10053'
  import {relogin} from "../../components/httpUtil/httpUtil";
  export default {
    name: 'PinGoodsDetail',
    data () {
      return {
        title: '商品详情页',
        isShow:false,
        isNum:1,
        curId:0,
        specList:[],
        showLoading: true, //显示加载动画
        goodsInfo:{},
        mallImgList:[],
        mallDetailList:[],
        mallSpec:{},
        specNo1:{},
        spec:0,
        isJoin:false,
        text:'加入店铺',
        price:0,
        jdPrice:0,
        showAlert:false,
        alertText:null,
        wxlist:{},
        type: ''
      }
    },
    methods: {
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go(){
        this.showAlert = false
      },
      // 隐藏动画
      hideLoading(){
        this.showLoading = false;
      },
      close(){
        this.isShow=!this.isShow
      },
      show(){
        if(this.isShow){
          if(this.isNum!=0){
            this.goShopping();
          }else {
            this.alertTip('数量不能为0');
            this.go = function(){
              this.showAlert = false;
            }
          }
        }else {
          this.isShow=!this.isShow
        }
      },
      //去首页
      toHome(){
        if (JSON.parse(window.localStorage.data).type === 0) {
          this.$router.push({name: 'mall', query: {
              shopId: window.localStorage.shopId,
              shopType: 1
            }})
        } else if (JSON.parse(window.localStorage.data).type === 1) {
          this.$router.push('/disTrueHome')
        }
      },
      goShopping(){
        if ( window.localStorage.data){
//          window.localStorage.loginGo = false;
          window.localStorage.removeItem("gpId");
          let goodsInfo ={
            userId:JSON.parse(window.localStorage.data).id,
            mallId: window.localStorage.mallId,
            isNum:this.isNum,
            specName:this.specName,
            spec:this.spec,
            price:this.price,
            mallImg:this.goodsInfo.mallImg,
            mallName:this.goodsInfo.mallName,
            comRatio:this.goodsInfo.commissionRatio,
          }
          localStorage.setItem('goodsInfo1021',JSON.stringify(goodsInfo) )
          this.$router.push(
            {
              name:'Exchange',
              params:goodsInfo
            })
        }
        else{
          // this.alertTip( "请先登录");
          // // alert("请先登录")
          // this.go =function () {
          //   this.showLoading = false
          //   window.localStorage.loginGo = true;
          //   this.$router.push("/fxlogin")
          // }
          // this.$router.push("/fxlogin")
        }

      },
      sub: function () {
        this.isNum--;
        if (this.isNum <= 0) {
          this.alertTip("数值不可以小于0");
          this.go = function(){
            this.showAlert = false;
          }
          this.isNum = 0;
        }
      },
      add: function () {
        this.isNum++;

      },
      changeCurId(index){
        this.curId = index;
        this.specName = this.specList[index].specificationsName
        this.spec = this.specList[index].id
        this.price = this.specList[index].salePrice;
        this.tpPrice = this.specList[index].tpPrice
        window.localStorage.msId=this.specList[index].id
      },
      //商品 订单详情
      /*
      * */
      fn10022(){
        let goodsInfo = JSON.parse(localStorage.getItem('goodsInfo1021'))
        const jsonValue = JSON.stringify({
          "c":"10022",
          "p":{
            "userId":JSON.parse(window.localStorage.data).id || goodsInfo.userId, // 用户ID
            "tokenId":token(),
            "mallId":window.localStorage.mallId || goodsInfo.mallId
          }
        });
        this.$http.post(api+'/qqs.us', jsonValue,true).then((res) => {
          console.log(res)
          if (res.data.p.isTrue) {
            this.hideLoading();
            this.goodsInfo = res.data.p.mall
            this.mallImgList = res.data.p.mall.mallImg.split('#');
            this.mallImgList.pop();
            this.mallDetailList = res.data.p.mall.detailsImg.split('#');
            this.mallDetailList.pop();
            console.log( this.mallDetailList )
            this.specList = res.data.p.mallSpecs
            this.mallSpec = res.data.p.mallSpecs[0]
            this.spec = this.mallSpec.id
            window.localStorage.msId=this.mallSpec.id
            this.price=this.mallSpec.salePrice;
            this.tpPrice=this.mallSpec.tpPrice;
            const malltitle=this.goodsInfo.mallName
            const mallurl=window.location.href
            const mallimg=this.goodsInfo.mallImg
            const mallrice=this.mallSpec.salePrice
            wx_share(malltitle,mallurl,mallimg,'价格:' +mallrice)

          } else {
            this.hideLoading();
            this.showAlert = true;
            this.alertText = res.data.p.errorMsg
            if (res.data.p.errorCode === 90) {
              this.go=()=> {
                this.showAlert = false
                let _this = this
                relogin(_this)
              }
            }
          }

        })
      },
    },

    /*beforeCreate(){
      //document.body.scrollTop ='0';
    },*/
   /* created(){
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          varThis.hideLoading();
          wx_config(varThis.wxlist);
          varThis.hideLoading();
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
    },*/
    mounted(){
      if(window.localStorage.data && JSON.parse(window.localStorage.data).type==1){
        this.type='1';
      }else{
        this.type='0';
      }
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10053.send(varThis,msg_10053.entity(),function(varThis,res){

        })
        document.documentElement.scrollTop=0;

        window.localStorage.goodUrl = window.location.href;
        console.log(window.localStorage.goodUrl)
        // const str = window.location.href.split('?')[1].split('&');
        // console.log(str)
        const shopId = parseInt(http_getParam('shopId'));
        const mallId = parseInt(http_getParam('mallId'));
        console.log(shopId);
        console.log(mallId);
        window.localStorage.shopId = shopId;
        window.localStorage.mallId = mallId;
        varThis.fn10022();
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.hideLoading();
         /* const malltitle=this.goodsInfo.mallName
          const mallurl=window.location.href
          const mallimg=this.goodsInfo.mallImg
          const mallrice=this.goodsInfo.salePrice / 100
          wx_share(malltitle,mallurl,mallimg,mallrice)*/
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)


    },
   /* updated(){
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        const malltitle=this.goodsInfo.mallName
        const mallurl=window.location.href
        const mallimg=this.goodsInfo.mallImg
        const mallrice=this.goodsInfo.salePrice / 100
        wx_share(malltitle,mallurl,mallimg,mallrice)
        wx.hideMenuItems({
          //禁用单独分享朋友圈QQ空间等功能
          menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
        });
        //启用分享功能按钮
      })


    },*/
    watch:{

    },
  }
</script>
<style lang="scss" scoped>
  .fenge{
    width:640px;
    height: 20px;
    background:#f4f4f4 ;
  }
  .content {
    width: 100%;
    height: 100%;
    background: #f4f4f4;
    .goods {
      margin-bottom: 20px;
      width: 100%;
      height: 910px;
      .goods-img {
        overflow: hidden;
        height: 640px;
        width: 100%;
        position: relative;
        img{
          width: 100%;
          height: 100%;
        }
        .fenye {
          text-align: center;
          width: 62px;
          height: 33px;
          line-height: 33px;
          position: absolute;
          bottom: 33px;
          right: 30px;
          background: url('./bg@1x.png') no-repeat;
          background-size: 100%;
        }
      }
      .goods-price {
        box-sizing: border-box;
        width: 100%;
        /*height: 270px;*/
        background: #ffffff;
        padding: 30px 30px 32px 30px;
        .top {
          .price {
            font-size: 42px;
            color: #fe3519;
            padding-right: 28px;
          }
        }
        .middle {
          padding: 24px 0;
          font-size: 24px;
          color: #a1a1a1;
          height: 24px;
          position: relative;
          .right {
            position: absolute;
            right: 0px;
          }
        }
        .goods-title {
          color: #3b3b43;
          font-size: 28px;
          line-height: 40px;
          font-weight: 800;
          .mallLabel{
            font-size: 24px;
            font-weight: 400;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

      }
    }
    .shop {
      border-bottom: 1px solid #f4f4f4;
      background: #ffffff;
      height: 140px;
      width: 100%;
      position: relative;
      .shop-img {
        width: 73px;
        height: 73px;
        position: absolute;
        top: 24px;
        left: 30px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .shop-name {
        position: absolute;
        top: 34px;
        left: 121px;
        .name {
          font-size: 24px;
          color: #3b3b43;
          margin-bottom: 14px;
        }
        .gys {
          font-size: 20px;
          color: #818790;
        }

      }
      .all {
        font-size: 20px;
        width: 136px;
        height: 56px;
        border: 1px solid #818790;
        border-radius: 10px;
        line-height: 56px;
        position: absolute;
        right: 34px;
        top: 34px;
        text-align: center;
        color: #818790;
      }
    }
    .text {
      height: 60px;
      background: #ffffff;
      margin-bottom: 20px;
      > ul {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        > li {
          font-size: 20px;
          color: #3b3b43;
          line-height: 60px;
          > img {
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .goods-detail {
      width: 100%;
      position: relative;
      background: #ffffff;
      margin-bottom: 98px;
      .detail-title {
        width: 100%;
        height: 70px;
        line-height: 70px;
        font-size:24px;
        color: #3b3b43;
        padding-left: 30px;
      }
      .detail-img{
        display: inline-block;
        width: 100%;
        img{
          width: 100%;
        }
      }
    }
    .footer {
      height: 98px;
      width: 100%;
      position: fixed;
      bottom: 0;
      display: flex;
      flex-flow: row nowrap;
      text-align: center;
      background: #ffffff;
      .home{
        flex:1;
        padding: 15px 34px 15px 31px;
        font-size:20px ;
        color:#818790 ;
        img{
          width: 39px;
          height: 39px;
        }
      }
      .serve{
        flex:1;
        font-size:20px ;
        padding: 15px 30px 15px 34px;
        color:#818790 ;
        img{
          width: 46px;
          height: 38px;
        }
      }
      .go{
        flex:8;
        height: 98px;
        line-height: 98px;
        width: 189px;
        background: url('./btn_fqpd@1x.png') ;
        background-size: 100% 100%;
        font-size: 28px;
        color: #ffffff;
      }
    }
    .choose{
      background: rgba(0,0,0,0.5);
      height: 100%;
      width: 100%;
      position: fixed;
      bottom: 98px;
      z-index: 2;
      .bg{
        background: #ffffff;
        height: 665px;
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 9;
        .shop-goods{
          overflow: hidden;
          padding-left: 30px;
          height: 186px;
          position: relative;
          .goods-img{
            margin-top: 38px;
            margin-right: 28px;
            float: left;
            width: 146px;
            height: 146px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .price{
            padding-top: 100px;
            p:nth-child(1){
              font-size: 32px;
              color: #fe3159;
              b{
                margin-left: 24px;
                font-size: 24px;
                color: #a1a1a1;
                font-weight: 400;
              }
            }
            p:nth-child(2){
              font-size: 24px;
              color: #3b3b43;
            }
          }
          .close{
            position: absolute;
            top: 38px;
            right: 30px;
            width: 30px;
            height: 25px;
          }
        }
        .guige{
          padding-left: 30px;
          padding-right: 30px;
          margin-top: 40px;
          .gg-title{
            font-size: 24px;
            color: #3b3b43;
            margin-bottom: 15px;
          }
          ul{
            display: flex;
            flex-flow: row wrap;
            text-align: center;
            line-height: 60px;
            .select{
              color: #fe3519;
              border-color:#fe3519;
            }
            li{
              /*flex: 0 0 30%;*/
              padding: 0 10px;
              height: 60px;
              /*width: 128px;*/
              margin: 15px 30px;
              border: 1px solid #818790;
              border-radius: 5px;
            }
          }

        }
        .num{
          height: 110px;
          padding-left: 34px;
          padding-right: 19px;
          p{
            font-size: 24px;
            color: #3b3b43;
            margin-bottom: 29px;
          }
          .numbers{
            margin-top: 25px;
            display: flex;
            line-height: 112px;
            flex-flow: row nowrap;
            justify-content: flex-start;
            img{
              width: 68px;
              height: 62px;
            }
            .number{
              width: 160px;
              height: 60px;
              font-size: 20px;
              border: 1px solid #a1a1a1;
              /*background: url("./btn@1x.png") no-repeat;*/
              /*background-size: 100%;*/
              text-align: center;
              line-height: 62px;
            }
          }
        }

      }

    }
  }
</style>
